<template>
  <div class="cart">
    <header>
      <i class="iconfont icon-fanhui" @click="$router.back()"></i>
      <span>购物车</span>
      <span @click="isEdit = !isEdit">{{ isEdit ? '完成' : '编辑' }}</span>
    </header>

    <section ref="section">
      <div v-if="$store.state.cart.length !== 0">
        <h1>
          <checkbox class="allOver" v-model="allChecked" checked-color="#b0352f"></checkbox>
          <span>商品</span>
        </h1>

        <div class="goods" v-for="item,index of $store.state.cart" :key="item.goods.id">

          <checkbox class="checkbox" v-model="item.checked" checked-color="#b0352f"></checkbox>
          <img :src="this.baseUrl + item.goods.img_url">
          <div class="info">
            <span>
              {{ item.goods.name }}
            </span>
            <span>
              ￥{{ item.goods.price }}
            </span>
          </div>

          <div class="btns">
            <icon name="cross" class="cross" v-show="isEdit" @click="handleDelGoods(index)" />
            <stepper v-model="item.num" class="stepper" :disabled="!isEdit" />
          </div>

        </div>
      </div>

      <h3 v-else>
        你还没有添加任何商品... <router-link to="/home">去首页看看吧！</router-link>
      </h3>
    </section>

    <footer>
      <div class="left">
        <div>
          <p>
            共有<span>{{ allNum }}</span>件商品
          </p>
          <p>
            总计：<span>￥{{ allPrice }}</span>
          </p>

        </div>
      </div>
      <button class="right" :class="{ active: btnActive }" :disabled="!btnActive" @click="handleAccount">
        去结算
      </button>
    </footer>
  </div>
</template>

<script setup>
//引入better-scroll
import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'
import ObserveImage from '@better-scroll/observe-image'

import { Checkbox, Stepper, Icon, Dialog } from 'vant'
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const store = useStore()
const router = useRouter()

const allChecked = computed({
  get () {
    return store.state.cart.every(item => item.checked)
  },
  set (newValue) {

    if ( store.state.cart.every(item => item.checked) ) {
      store.state.cart.forEach((item, index) => store.commit('changeGoodsCartChecked', { index, flag: false }))
    } else {
      store.state.cart.forEach((item, index) => store.commit('changeGoodsCartChecked', { index, flag: true }))
    }
    
  }
})

const isEdit = ref(false)

const handleDelGoods = (index) => {
  Dialog.confirm({
    message: '确定要删除这些商品吗？'
  }).then(() => {
    store.commit('delGoodsCart', index)
  })
}

const btnActive = computed(() => {
  if (isEdit.value || store.state.cart.every(item => !item.checked)) return false
  return true
})

const allNum = computed(() => {
  return store.state.cart.reduce((pre, cur) => cur.checked ? pre + cur.num : pre, 0)
})

const allPrice = computed(() => {
  return store.state.cart.reduce((pre, cur) => cur.checked ? pre + cur.num * cur.goods.price : pre, 0)
})

const handleAccount = () => {
  router.push('/checkout')
}

//设置页面滚动
const section = ref()
onMounted(() => {
  BScroll.use(ObserveDOM)
  BScroll.use(ObserveImage)
  new BScroll(section.value, {
    observeDOM: true,
    observeImage: true,
    click: true
  })
})

</script>

<style lang="less" scoped>
.cart {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  header {
    background-color: #b0352f;
    height: 45px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    .iconfont {
      height: 45px;
      line-height: 45px;
      font-size: 28px;
      color: #fff;
      position: absolute;
      left: 0;
    }

    span {
      color: #fff;
    }

    span:nth-of-type(1) {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    span:nth-of-type(2) {
      margin-left: auto;
      padding: 0 10px;
      line-height: 45px;
    }
  }

  section {
    flex: 1;
    overflow: hidden;
    background-color: #f8f8f8;
    > div {

      h1 {
        display: flex;
        align-items: center;
        height: 60px;
        font-size: 16px;
        color: #333;
        padding: 0 15px;
        border-bottom: 1px solid #e8e8e8;
        span {
          margin-left: 15px;
        }
      }

      .goods {
        border-bottom: 1px solid #e8e8e8;
        background-color: #fff;
        height: 76px;
        display: flex;
        align-items: center;
        padding: 10px 5px;
        position: relative;
        overflow: hidden;

        .checkbox{
          width: 40px;
          justify-content: center;
          flex-shrink: 0;
        }
        img {
          width: 75px;
          height: 75px;
        }
        .info{
          flex: 1;
          margin-left: 10px;
          height: 100%;
          overflow: hidden;
          box-sizing: border-box;
          padding-right: 15px;
          span:nth-of-type(1) {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            display: block;
            font-size: 13px;
            color: #222;
          }
          span:nth-of-type(2) {
            display: block;
            font-size: 16px;
            color: #b0352f;
            margin-top: 20px;
          }
        }

        .btns {
          height: 100%;
          .stepper {
            position: absolute;
            bottom: 5px;
            right: 5px;
          }

          .cross{
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 18px;
          }
        }
      }
    }
  }

  footer {
    height: 45px;
    display: flex;
    box-shadow: -3px 0 3px rgba(0, 0, 0, 30%);

    .left {
      flex: 1;
      display: flex;
      font-size: 12px;
      color: #333;
      margin-left: 20px;

      >div {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      p {
        height: 15px;
        span {
          color: #b0352f;
          font-size: 14px;
          display: inline-block;
          margin: 0 5px;
        }
      }

      p:nth-of-type(2) {
        span {
          margin: 0 3px;
        }
      }
    }

    .right {
      line-height: 45px;
      width: 120px;
      font-size: 18px;
      color: #999;
      border: none;
      background-color: #efefef;
    }

    .active {
      color: #fff;
      background-color: #b0352f;
    }
  }
}
</style>